<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>
      需求:
      文本框中输入用户名,输入完成后(文本框失去焦点)给服务器发送请求,询问当前用户名是否可用
    </p>
    <input type="text" id="inp" /> <span id="tip"></span>
    <script>
      // 1. 获取元素
      const inp = document.getElementById('inp')
      const tip = document.getElementById('tip')

      // 2. 给文本框绑定失去焦点事件
      inp.onblur = function () {
        // 3. 在事件处理函数中发送ajax请求
        const xhr = new XMLHttpRequest()
        xhr.open('post', 'http://localhost:5000/verifyUsername')
        xhr.setRequestHeader(
          'Content-Type',
          'application/x-www-form-urlencoded'
        )
        xhr.send('username=' + inp.value)
        // 4. 接收响应,动态的设置span的内容提示用户
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              const result = JSON.parse(xhr.responseText)
              if (result.code === 2) {
                // 可用
                tip.style.color = 'green'
              } else {
                // 不可用
                tip.style.color = 'red'
              }
              tip.innerText = result.message
            } else {
              alert('网络错误,请稍后再试')
            }
          }
        }
      }
    </script>
  </body>
</html>
